<template>
<div class="cent">
    <el-container>
        <el-header style="border-bottom: 1px solid #64b587be;height:50px;background-color: #41B883;">
            <el-row :span="20" style="margin: 8px 10px;">
                <el-col :span="1">
                    <a style="font-size: 30px;">
                        <i class="el-icon-arrow-left" style="color:white;"></i>
                    </a>
                </el-col>
                <el-col :span="10" :offset="7">
                    <div style="color:white;">个人信息</div>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-container>
                <!--主内容显示区域，数据内容都是在这里面渲染的-->
                <el-main>
                    <el-menu router :default-active="$route.path" @open="handleOpen" @close="handleClose" theme="dark">
                        <el-menu-item index="/imf">个人主页
                            <div class="rig">></div>
                            <div class="pho">
                                <el-image style="height:45px; width:45px" :src="require('@/assets/pho/pic1.png')" fit="fit"></el-image>
                            </div>
                        </el-menu-item>
                        <el-tooltip trigger="click" content="已认证">
                        <el-menu-item index="/checkrn">
                            实名认证
                            <div class="rig">></div>
                            <div class="pho">
                                <el-button type="text" style="font-size: 20px;
                                color: #0000009a;">{{name}}</el-button>
                                <i class="el-icon-circle-check" style="color:red"></i>
                            </div>
                        </el-menu-item>
                        </el-tooltip>
                        <el-menu-item index="/account">支付宝账号
                            <div class="rig">></div>
                            <div class="pho">
                                {{num}}
                            </div>
                        </el-menu-item>
                        <el-menu-item index="/qrcode">我的二维码
                            <div class="rig">></div>
                        </el-menu-item>
                    </el-menu>
                    <el-menu router :default-active="$route.path" @open="handleOpen" @close="handleClose" theme="dark">
                        <el-menu-item index="/maddress">我的收货地址
                            <div class="rig">></div>
                        </el-menu-item>
                        <el-menu-item index="/minvoice">我的发票抬头
                            <div class="rig">></div>
                        </el-menu-item>
                        <el-menu-item index="/collection">聊天收藏
                            <div class="rig">></div>
                        </el-menu-item>
                    </el-menu>
                </el-main>
            </el-container>
        </el-main>
        <MainTarBar />
    </el-container>
</div>
</template>

<script>
import MainTarBar from '../components/content/maintarbar/MainTarBar.vue'

export default({
    name:"Persons",
    data() {
        return{
            /*photo:'@/assets/img/pic1.png',*/
            /*photo:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',*/
            name:"patrick",
            num:"123******45",
        }
    },
    components:{
        MainTarBar
    }
})
</script>

<style scoped>
    .headi{
        background-color: wheat;
    }

    .el-container{
        height: 812px;
        display: flex;
        font-size: 25px;
    }
    .el-header{
        background-color: white;
        margin-bottom: 20px;
    }

    .el-header, .el-main {
        padding: 0;
    }

    .el-menu{
        margin-bottom: 20px;
    }

    .el-menu-item{
        /*background-color: wheat;*/
        height: 50px;
        width: 375px;
        line-height: 50px;
        border-bottom: 1px solid #64b5873f;
        font-size: 20px;
        text-align: left;
    }

    .pho{
        height: 50px;
        widows: 50px;
        float: right;
        line-height: 45px;
        font-size: 20px;
        color: #0000009a;
        /*background-color: wheat;*/
    }

    .rig{
        width: 5px;
        height: 15px;
        float: right;
        color: #0000009a;
    }

</style>
